import { Form, Input, message, Modal, Tooltip, TreeSelect } from 'antd';
import { useEffect } from 'react';

import departmentService from '@/api/services/security/departmentService';

import { DepartmentType } from './modal';

import { ModalProps } from '#/entity';

export function DepartmentModal({
  title,
  show,
  formValue,
  onOk,
  onCancel,
}: ModalProps<DepartmentType>) {
  const [form] = Form.useForm();
  useEffect(() => {
    console.log(formValue);
  }, [formValue]);
  const onFinish = (values: any) => {
    const transData = {
      ...values,
      parentId: values.parent.id || 0,
    };
    if (formValue.id) {
      departmentService.updateDepartment(formValue.id, transData).then(() => {
        message.success(`${transData.name}修改成功`);
        onOk();
      });
    } else {
      departmentService.createDepartment(transData).then(() => {
        message.success(`${transData.name}创建成功`);
        onOk();
      });
    }
  };

  // ______________________________________________________________
  const num = 10000;
  const effectiveFigure = {
    // 校验二维码宽度是否有效
    pattern: /^\d+$/,
    message: '只能输入数字',
  };
  const effectiveFigureNum = {
    validator: (_, value) => {
      if (value > num) {
        return Promise.reject(new Error(`排序数字不能超过${num}`));
      }
      return Promise.resolve();
    },
  };
  const nameWidth = 32;
  const codeWidth = 32;
  const remarkWidth = 128;
  const modalRender = (dom: React.ReactNode) => (
    <Form
      initialValues={formValue}
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 18 }}
      onFinish={onFinish}
      clearOnDestroy
      layout="horizontal"
      // layout="vertical"
    >
      {dom}
    </Form>
  );

  return (
    <Modal
      width={600}
      title={title}
      open={show}
      onCancel={onCancel}
      okButtonProps={{ autoFocus: true, htmlType: 'submit' }}
      destroyOnClose
      modalRender={modalRender}
    >
      <Form.Item
        name={['parent', 'id']}
        label={<Tooltip title="上级部门若为空则创建根部门">上级部门</Tooltip>}
      >
        <TreeSelect
          allowClear
          style={{ width: '100%' }}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          treeData={formValue.tableData}
          fieldNames={{ label: 'name', value: 'id', children: 'children' }}
        />
      </Form.Item>
      <Form.Item
        name="name"
        label="部门名称"
        rules={[
          { required: true, message: '请输入部门名称' },
          {
            validator: (_, value) => {
              if (value.length > nameWidth) {
                return Promise.reject(new Error(`名称长度不能超过${nameWidth}`));
              }
              return Promise.resolve();
            },
          },
        ]}
      >
        <Input showCount maxLength={nameWidth} />
      </Form.Item>
      <Form.Item
        name="code"
        label="部门编码"
        rules={[
          { required: true, message: '请输入部门编码' },
          {
            validator: (_, value) => {
              if (value.length > codeWidth) {
                return Promise.reject(new Error(`部门编码长度不能超过${codeWidth}`));
              }
              return Promise.resolve();
            },
          },
        ]}
      >
        <Input showCount maxLength={codeWidth} />
      </Form.Item>

      <Form.Item name="remark" label="备注">
        <Input.TextArea showCount maxLength={remarkWidth} />
      </Form.Item>
    </Modal>
  );
}
